import { FC, useEffect, useState } from 'react'
import { useAppSelector } from 'store/hooks'
import { useNavigate, useLocation, useParams } from 'react-router-dom'
import { Button } from 'antd-mobile'
import { ImageView } from 'components'
import './tab.scss'
import qs from 'qs'

const TabBar = () => {
  const navigate = useNavigate()
  const store = useAppSelector((s) => s.classify)
  const [tabIndex, setTabIndex] = useState<number>(0)
  const location = useLocation()
  const params = useParams()

  // 根据带过来的tab ，序列化查询字符串
  console.log('location', qs.parse(location.search.replace(/\?/, '')))
  const { tab } = qs.parse(location.search.replace(/\?/, ''))

  return (
    <div className="tab-wrapper">
      <Button
        onClick={() => {
          navigate(-1)
        }}
      >
        返回上一页
      </Button>
      <div className="tab-header">
        <div
          className="tab-header-content"
          style={{ width: `${store.typeObj.children && store.typeObj.children.length * 95}px` }}
        >
          {store.typeObj.children &&
            store.typeObj.children.map((item, i) => {
              return (
                <span
                  className={tabIndex === i ? 'active-span' : ''}
                  onClick={() => {
                    setTabIndex(i)
                  }}
                  key={item.id}
                >
                  {item.classifyType}
                </span>
              )
            })}
        </div>
      </div>
      <div className="tab-content">
        {store.typeObj.children &&
          store.typeObj.children[tabIndex].children?.map((item) => {
            return (
              <ol
                onClick={() => {
                  navigate(`/detail/${item.id}?tab=${tab}&tabIndex=${tabIndex}`)
                }}
                className="tab-content-item"
                key={item.id}
              >
                <li style={{ width: 150, height: 150 }}>
                  <ImageView src={item.img}></ImageView>
                </li>
                <li className={'font-msg'}>
                  <span style={{ color: 'red' }}>{item.classifyType}</span>:{item.title}
                </li>
              </ol>
            )
          })}
      </div>
    </div>
  )
}

export default TabBar
